

<template>
  <div class="app-container">

    <div class="app-container__section" >
      <PlusSearch
          v-bind="getSearchBinds()"
          :columns="columns"
          v-model="searchForm"
      >

        <template #plus-field-createTime>
          <el-date-picker  start-placeholder="开始时间" end-placeholder="结束时间"  v-model="searchForm.timeRange" type="daterange"  />
        </template>

      </PlusSearch>
    </div>

    <div class="app-container__section">
      <PlusTable
          v-bind="getBinds()"
          :columns="columns"
      >
        <template #empty>
          <el-empty image-size="100" description="暂无数据"></el-empty>
        </template>
        <template #title>
          <table-title />
        </template>
        <template #toolbar>

          <el-button
              type="primary"
              plain
              icon="Plus"
              @click="handleAdd"
              v-hasPermi="['system:course:add']"
          >新增</el-button>
          <el-button
              type="success"
              plain
              icon="Edit"
              :disabled="gSelection.length !== 1"
              @click="handleUpdate"
              v-hasPermi="['system:course:edit']"
          >修改</el-button>
          <el-button
              type="danger"
              plain
              icon="Delete"
              :disabled="gSelection.length === 0"
              @click="handleDelete"
              v-hasPermi="['system:course:remove']"
          >删除</el-button>
          <el-button
              type="warning"
              plain
              icon="Download"
              @click="handleExport"
              v-hasPermi="['system:course:export']"
          >导出</el-button>

          <ClockTimer :task="gGetList" />
          <SearchAreaControl v-model="gShowSearchForm" />
        </template>

        <template #plus-cell-status="{row}">
          <dict-tag :options="sys_data_status" :value="row.status"  />
        </template>

        <template #plus-cell-action="scope">
          <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:course:remove']">删除</el-button>
        </template>
      </PlusTable>
    </div>

    <PlusDialogForm
        ref="plusFormInstance"
        v-model:visible="dialogShow"
        v-model="formData"
        :form="{ columns,  labelWidth:'110px',  labelPosition:'right',  rules:formRules }"
        :dialog="{ title: dialogTitle, width: '540px', top: '12vh', confirmLoading }"
        @confirm="handleSubmit"
        @cancel="handleCancel"
    >

    </PlusDialogForm>

  </div>
</template>


<script setup name="ProfessionalCourse">
import { listProfessionalCourseApi, getProfessionalCourseApi, delProfessionalCourseApi, addProfessionalCourseApi, updateProfessionalCourseApi } from "@/api/edutation/professional.js";
import {PlusSearch, PlusTable, PlusDialogForm } from 'plus-pro-components'
import { useTablePage } from '@/hooks/useTablePage.js'
import { useActions } from '@/hooks/useActions.js'
import { getCurrentInstance,ref } from "vue"
import {useCommonData} from "@/hooks/useCommonData.js";
import {useRoute} from "vue-router";
const { proxy } = getCurrentInstance();

const { sys_data_status } = proxy.useDict('sys_data_status')

const primaryKey = "id"  // 主键
const route = useRoute();
const proId = computed(()=>route.query.id)

const {  courseDataList, getCourseDataList } = useCommonData();

getCourseDataList({
  status:'0', // 启用
});

// =============================================
const plusFormInstance = ref(null);
const formInstance = computed(()=>plusFormInstance.value?.formInstance)
const state = reactive({
  dialogShow:false,
  formData:{
    proId: "",
    courseIds:[]
  },
  formRules:{
    courseIds:[
      { required: true, type:'array', min:1,  message: '请选择课程', trigger: 'change' },
    ]
  },
  confirmLoading:false,
})
const { formData, confirmLoading, formRules, dialogShow } = toRefs(state)
const isEdit = computed(() =>!!formData.value[primaryKey])
const dialogTitle = '关联课程'

// =============================================
const columns = computed(()=>[{
  label: '主键ID',
  prop: 'id',
  hideInSearch:false,
  hideInTable: false,
  hideInForm: true,
  valueType:'input',
  tableColumnProps: {
    align: 'center'
  },

},{
  label: '专业名称',
  prop: 'proId',
  hideInSearch:false,
  hideInTable: false,
  hideInForm: true,
  valueType:'input',
  tableColumnProps: {
    align: 'center'
  },
  render:(_,{row})=>row.professionalName,
  fieldProps:{
    maxlength: 200,
    modelModifiers: { trim: true },
  },

},
  {
    label: '课程名称',
    prop: 'courseIds',
    hideInSearch:true,
    hideInTable: true,
    hideInForm: false,
    valueType:'select',
    options: courseDataList.value,
    optionsMap:{ label:'courseName', value:'courseId' },
    fieldProps:{
      filterable:true,
      clearable:true,
      multiple:true
    },
  }
,{
  label: '课程名称',
  prop: 'courseId',
  hideInSearch:false,
  hideInTable: false,
  hideInForm: true,
  valueType:'input',
  render:(_,{row})=>row.courseName,
  tableColumnProps: {
    align: 'center'
  },
  fieldProps:{
    maxlength: 200,
    modelModifiers: { trim: true },
  },
},
  {
  label: '状态',
  prop: 'status',
  hideInSearch:false,
  hideInTable: false,
  hideInForm: true,
  valueType:'radio',
  options: sys_data_status.value,
  tableColumnProps: {
    align: 'center'
  },
},{
  label: '创建者',
  prop: 'createBy',
  hideInSearch:false,
  hideInTable: true,
  hideInForm: true,
  valueType:'input',

},{
  label: '创建时间',
  prop: 'createTime',
  hideInSearch:false,
  hideInTable: true,
  hideInForm: true,
  valueType:'date-picker',

  fieldProps:{
    type: 'date',
    format: 'YYYY-MM-DD',
    valueFormat: 'YYYY-MM-DD',
  },

},
  {
    label: '操作',
    prop: 'action',
    minWidth: '100px',
    hideInSearch: true,
    hideInForm: true,
    tableColumnProps: {
      align: 'center',
      fixed: 'right'
    }
  }
])

// =============================================
// 列表请求逻辑
const searchForm = ref({})
const {
  gGetList,
  gSelection,
  gShowSearchForm,
  getBinds,
  getSearchBinds
} = useTablePage(listProfessionalCourseApi, {
  searchForm,
  beforeRequest(query){

    const { timeRange, ...rest } = query;
    const params = proxy.formatRangeTime(timeRange, undefined,'YYYY-MM-DD');
    return { ...rest, params }

  }
})

// 删除逻辑
const { deleteAction } = useActions();
function handleDelete(row) {
  deleteAction({
    api: delProfessionalCourseApi,
    uniqueKey:primaryKey,
    selection:row[primaryKey] || gSelection.value
  }).then(() => {
    gGetList();
  });
}

// 新增操作
const handleAdd = ()=>{
  dialogShow.value = true
}

// 取消按钮操作
function handleCancel() {
  dialogShow.value = false
  formData.value = {}
  formInstance.value.resetFields();
}

// 确定按钮操作
const handleSubmit = async () => {
  try {
    confirmLoading.value = true
    const { data }  = await addProfessionalCourseApi({
      ...formData.value,
      proId:proId.value
    })
    proxy.$modal.msgSuccess(data.message)
    handleCancel();
    await gGetList();
  } catch (error) {
    console.warn('提交错误:', error)
  } finally {
    confirmLoading.value = false
  }
}

// 修改回显数据操作
function handleUpdate(row) {
  const key = row[primaryKey] || gSelection.value[0][primaryKey];
  getCourseApi(key).then(response => {
    formData.value = response.data;
    dialogShow.value = true;
  });
}

// 导出逻辑
const  handleExport = () =>{
  proxy.download(
      'system/course/export',
      {...searchForm.value},
      `course_${new Date().getTime()}.xlsx`
  )
}
</script>


